<template>
  <div class="yundong">
    <ul class="tobutext">
      <li v-for="(v, i) in arr" :key="i">
        {{v.text}}
      </li>
      <!-- <li>计划</li>
      <li>户外跑步</li>
      <li>室内跑步</li>
      <li>瑜伽</li>
      <li>健身</li>
      <li>步行</li>
      <li>骑行</li>
      <li>跳绳</li> -->
    </ul>
    <div class="caidany">
      <span class="iconfont icon-caidan"></span>
    </div>
  </div>
</template>

<script>
import getlink from "../../apis/getapi"
export default {
  data() {
    return {
      arr:[],
    }
  },
  mounted() {
    getlink("/data/list/xiaoming").then((ok)=>{
      console.log(ok.data.section);
      this.arr = ok.data.section;
    })
  },

  methods: {
    fun(){
      this.$router.push("/Yujia")
    }
  },
};
</script>

<style scoped>

.yundong {
  position: fixed;
  z-index: 300;
  display: flex;
  width: 100%;
  font-size: 0.16rem;
  height: .7rem;
  margin: auto;
  background: #f3f4f6;

}
.tobutext {
  display: flex;
  align-items: center;
  width: 80%;
  height: 0.7rem;
  overflow-x: auto;
  box-sizing: content-box;
}
.tobutext li {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.2rem;
  flex-shrink: 0;
  width: 1rem;
  height: 0.6rem;
}

.caidany {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: 0.7rem;
}

.caidany .iconfont {
  font-size: 0.25rem;
}

</style>